<template>
  <div class="monitor-dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409eff">
              <el-icon><Avatar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ overview.totalAgents || 0 }}</div>
              <div class="stat-label">总智能体数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67c23a">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ overview.onlineAgents || 0 }}</div>
              <div class="stat-label">在线智能体</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #e6a23c">
              <el-icon><List /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ overview.totalTasks || 0 }}</div>
              <div class="stat-label">总任务数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #f56c6c">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ overview.failedTasks || 0 }}</div>
              <div class="stat-label">失败任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>任务状态分布</span>
          </template>
          <div ref="taskChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>智能体状态</span>
          </template>
          <div ref="agentChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getDashboardOverview } from '@/api/dashboard'

const overview = ref({})
const taskChartRef = ref(null)
const agentChartRef = ref(null)
let taskChart = null
let agentChart = null
let timer = null

const loadData = async () => {
  const res = await getDashboardOverview()
  overview.value = res.data
  updateCharts()
}

const updateCharts = () => {
  if (taskChart) {
    taskChart.setOption({
      tooltip: { trigger: 'item' },
      legend: { bottom: '0%', left: 'center' },
      series: [{
        name: '任务状态',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: overview.value.pendingTasks || 0, name: '待处理', itemStyle: { color: '#909399' } },
          { value: overview.value.runningTasks || 0, name: '执行中', itemStyle: { color: '#e6a23c' } },
          { value: overview.value.successTasks || 0, name: '成功', itemStyle: { color: '#67c23a' } },
          { value: overview.value.failedTasks || 0, name: '失败', itemStyle: { color: '#f56c6c' } }
        ]
      }]
    })
  }

  if (agentChart) {
    agentChart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['总数', '在线', '离线'] },
      yAxis: { type: 'value' },
      series: [{
        name: '数量',
        type: 'bar',
        data: [
          { value: overview.value.totalAgents || 0, itemStyle: { color: '#409eff' } },
          { value: overview.value.onlineAgents || 0, itemStyle: { color: '#67c23a' } },
          { value: (overview.value.totalAgents || 0) - (overview.value.onlineAgents || 0), itemStyle: { color: '#909399' } }
        ],
        barWidth: '60%'
      }]
    })
  }
}

onMounted(() => {
  taskChart = echarts.init(taskChartRef.value)
  agentChart = echarts.init(agentChartRef.value)
  loadData()
  timer = setInterval(loadData, 10000)
})

onUnmounted(() => {
  clearInterval(timer)
  taskChart?.dispose()
  agentChart?.dispose()
})
</script>

<style scoped>
.monitor-dashboard {
  padding: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}
</style>
